<template>
  <div class="pb-8">
    <NGrid
      :x-gap="16"
      :y-gap="16"
      cols="2 s:3 l:4 xl:5"
      responsive="screen"
      :item-responsive="true"
    >
      <NGridItem
        v-for="tool in tools"
        :key="tool.id"
        :span="getGridSize(tool).cols"
        :span-sm="4"
        :span-md="2"
      >
        <NCard
          embedded
          class="transition-all cursor-pointer hover:shadow-lg hover:-translate-y-1 dark:hover:shadow-gray-800 rounded-xl group"
          :class="getGridSize(tool).rows === 2 ? 'aspect-square' : 'aspect-video'"
          @click="navigateToTool(tool)"
        >
          <template #header>
            <div class="flex items-center justify-between px-2">
              <div class="flex items-center gap-3">
                <div 
                  class="flex items-center justify-center w-12 h-12 text-2xl rounded-lg"
                  :class="[
                    tool.icon.startsWith('i-') ? tool.icon : 'bg-gradient-to-br from-blue-500/10 to-blue-500/20 dark:from-blue-400/20 dark:to-blue-400/30'
                  ]"
                >
                  {{ !tool.icon.startsWith('i-') ? tool.icon : '' }}
                </div>
                <h3 class="text-lg font-medium">{{ tool.title }}</h3>
              </div>
              <n-button 
              size="small" 
              circle 
              class="transition-opacity group-hover:opacity-100"
              :type="toolsStore.isFavorite(tool.id) ? 'warning' : 'default'"
              @click="(e) => toggleFavorite(e, tool)">
                <template #icon>
                  <span>{{ toolsStore.isFavorite(tool.id) ? '★' : '☆' }}</span>
                </template>
              </n-button>
            </div>
          </template>

          <div class="flex flex-col h-full px-2">
            <p class="flex-grow text-sm text-left text-gray-600 line-clamp-2 dark:text-gray-400">
              {{ tool.description }}
            </p>

            <div class="flex flex-wrap gap-2 mt-4">
              <NTag
                v-for="tag in tool.tags"
                :key="tag"
                :bordered="false"
                round
                size="small"
                :color="{
                  color: 'rgba(59, 130, 246, 0.1)',
                  textColor: 'rgb(59, 130, 246)',
                  borderColor: 'rgb(59, 130, 246)'
                }"
              >
                {{ tag }}
              </NTag>
            </div>
          </div>
        </NCard>
      </NGridItem>
    </NGrid>

    <!-- 无结果提示 -->
    <div
      v-if="tools.length === 0"
      class="flex flex-col items-center justify-center py-12 text-gray-500 dark:text-gray-400"
    >
      <div class="mb-4 text-6xl">🔍</div>
      <p>没有找到相关工具</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { NCard, NSpace, NGrid, NGridItem, NTag, NIcon, NButton } from 'naive-ui'
import { useRouter } from 'vue-router'
import { useToolsStore } from '../store/tools'
import type { Tool } from '../store/tools'

const props = defineProps<{
  tools: Tool[]
}>()

const router = useRouter()
const toolsStore = useToolsStore()

const navigateToTool = (tool: Tool) => {
  router.push(tool.path || `/tool/${tool.id}`)
}

const toggleFavorite = (event: Event, tool: Tool) => {
  event.stopPropagation() // 防止触发卡片的点击事件
  toolsStore.toggleFavorite(tool.id)
}

// 计算每个工具的网格大小
const getGridSize = (tool: Tool) => {
  // 可以根据工具的重要性或其他属性来决定大小
  return {
    cols: tool.category === '常用工具' ? 2 : 1,
    rows: tool.category === '常用工具' ? 2 : 1
  }
}
</script>

<style scoped>
.n-card {
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

:deep(.n-card.n-card--bordered) {
  border: 1px solid rgba(239, 239, 245, 0.1);
  border-radius: 1rem;
}

:deep(.n-card__content) {
  padding-top: 8px;
}

:deep(.n-card__header) {
  padding-top: 16px;
  padding-bottom: 12px;
}

.dark .n-card {
  background: rgba(24, 24, 28, 0.8);
}

.dark :deep(.n-card.n-card--bordered) {
  border-color: rgba(255, 255, 255, 0.09);
}

/* 标签样式 */
:deep(.n-tag) {
  border-radius: 999px;
}

.dark :deep(.n-tag) {
  background: rgba(59, 130, 246, 0.15);
  color: rgb(147, 197, 253);
}

/* 收藏按钮样式 */
:deep(.n-button.n-button--quaternary) {
  transition: all 0.3s ease;
}

:deep(.n-button.n-button--quaternary:hover) {
  background-color: rgba(255, 255, 255, 0.1);
}

.dark :deep(.n-button.n-button--quaternary:hover) {
  background-color: rgba(255, 255, 255, 0.05);
}
</style>

<script lang="ts">
export default {
  name: 'BentoGrid'
}
</script>